<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>添加代理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css?v=4.1.0" rel="stylesheet">
    <!-- 日期插件样式 -->
    <link href="${pageContext.request.contextPath }/css/foundation-datepicker.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    
    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath }/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
    <!-- 日期插件js-->
    <script src="${pageContext.request.contextPath }/js/foundation-datepicker.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
    
 	// 手机号码验证  
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
 
    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#add_admin").validate({
            rules: {
            	name: {//姓名
                    required: true,
    				maxlength: 20
                },
                wechat: {//登录帐号
                    required: true,
    				maxlength: 30
                },
                telphone: {//登录帐号
                    required: true,
                    isMobile:true,
                    remote: {
    					url: "${pageContext.request.contextPath }/admin/admin/isTelphone",
    					cache: false
    				},
    				minlength: 11
                },
                password: {//登录密码
                    required: true,
                   	minlength: 6,
    				maxlength: 15
                }
            },
            messages: {
            	name:{
            		required:icon + "请填写姓名",
            		maxlength:icon + "最大长度为20"
            	},
            	wechat: {
            		required:icon + "请输入微信公共号",
            		maxlength:icon + "最大长度为30"
            		},
               	telphone: {
            		required:icon + "请填写电话",
            		isMobile:icon + "请输入正确格式",
            		remote:icon + "手机号已存在",
            		minlength:icon + "请输入11位"
               		},
            	password:{
                	required:icon + "请填写登录密码",
            		maxlength:icon + "最大长度为15",
                	minlength:icon + "最小长度为6"
                }
                
            },
    		submitHandler: function(form) {
    			insertProxy();
    		}
        });
    });
 	//添加
	function insertProxy(){	
		$.ajax({
    		url:"${pageContext.request.contextPath }/admin/proxyCompany/insertProxyCompany",
    		data:$("#add_admin").serialize(),
    		type:"post",
    		success:function(result){
    			if(result.code == "0"){
    				layer.msg(result.message,{icon:1});
    				setTimeout('cancel()',3000);
    			}else {
    				layer.msg(result.message,{icon:0});
    			}
    		}
    	});
	}
 	function cancel(){
 		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
 	}
	 function ValidateValue(textbox)
     {
          var IllegalString = "\`~@#;,.!#$%^&*()+{}|\\:\"<>?-=/,\' []";
          var textboxvalue = textbox.value;
          var index = textboxvalue.length - 1;
          
          var s = textbox.value.charAt(index);
          
          if(IllegalString.indexOf(s)>=0)
          {
             s = textboxvalue.substring(0,index);
             textbox.value = s;
          }
     }
    </script>
	<style>
		input,select{
			 width:168px;
			 height:25px;
			 border:1px solid #ccc;
			 margin-left:24px;
		}
		.label-text{
			width:80px;
			text-align:right;
		}
		
		.form-item{
			display:flex;
		}
		.label-text{
		   height: 34px;
		   line-height: 34px;
		   font-weight: normal;
		}
		.addInput{ 
			background-color: #ffffff;
		    background-image: none;
		    border: 1px solid #e5e6e7;
		    border-radius: 1px;
		    color: inherit;
		    display: block;
		    font-size: 14px;
		    padding: 6px 12px;
		    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		    height: 34px;
		   line-height: 34px;
		   flex: 1;
		}
		.saveBtn{
			 display: block;
		    margin: 15px auto;
		    width: 120px;
		}
		.pass-box{
			margin-left: 24px;
			flex: 1;
		}
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="social-feed-box">
                    <div class="social-footer">
						<form name = "form1" id = "add_admin">
							<div class="form-item">
	                    	<c:if test="${not empty proxyList}" >
								<label  class="label-text">所属代理：</label>
								<select name = "proxyId" id="proxyId">
									<c:forEach items = "${proxyList }" var = "e">
										<option value = "${e.id }">${e.name }</option>
									</c:forEach>
								</select><br/><br/>
							</c:if>
							</div>
							<div class="form-item">
								<label class="label-text">公司名：</label>
								<input type = "text" class="addInput" name = "name"  placeholder="输入公司名，不超过20字" maxlength="20" 
								onkeyup = "ValidateValue(this)"><br/><br/>
							</div>
							<div class="form-item">
								<label class="label-text">微信公共号：</label>
								<input type = "text" class="addInput" name = "wechat"  placeholder="输入公共号，不超过30字" maxlength="30" 
								onkeyup = "ValidateValue(this)"><br/><br/>
							</div>
							<div class="form-item">
								<label class="label-text">手机号：</label>
								<input type = "text" class="addInput" name = "telphone"  placeholder="输入姓名，不超过20字" maxlength="11" 
								onkeyup = "ValidateValue(this)"><br/><br/>
							</div>
							<div class="form-item">
								<label class="label-text">密码：</label>
								<div class="pass-box">
									<input type = "password" class="addInput" style="margin-left: 0;width: 100%;" name = "password" id = "password" value = "123456" placeholder="输入6-15位数字/大小写字母" minlength="6" maxlength="15" onkeyup = "ValidateValue(this)"/>
									<small>默认密码：123456</small><br/><br/>
								</div>
							</div>
							<button class="btn btn-primary saveBtn" type="submit">保存</button>
					    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
